import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native'
import AsyncStorage from '@react-native-community/async-storage';

const KEY = 'save_key';

export default class AsyncStoragePage extends Component {

    doSave() {
        AsyncStorage.setItem(KEY, this.value, err => {
            err && console.log(err.toString());
        })
    }

    doRemove() {
        AsyncStorage.removeItem(KEY, err => {
            err && console.log(err.toString());
        })
    }

    getData() {
        AsyncStorage.getItem(KEY, (err, value) => {
            this.setState({
                showText: value
            });
            console.log(value);
            err && console.log(err.toString());
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.input_container}>
                    <TextInput
                        style={styles.input}
                        onChangeText={text => {
                            this.value = text;
                        }}
                    />
                </View>
                <View style={styles.input_container}>
                    <Text onPress={() => {
                        this.doSave();
                    }}>
                        存储
                    </Text>
                    <Text onPress={() => {
                        this.doRemove();
                    }}>
                        删除
                    </Text>
                    <Text onPress={() => {
                        this.getData();
                    }}>
                        获取
                    </Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    input: {
        height: 30,
        flex: 1,
        borderColor: 'black',
        borderWidth: 1,
        marginRight: 10
    },
    input_container: {
        flexDirection: 'row',
        alignItems: 'center'
    }
})